<template>
  <el-row>
    <el-col :span="2"> 功能名称 </el-col>
    <el-col :span="5">
      <el-select v-model="form.permissionsId" placeholder="请选择" style="width: 189px">
        <el-option v-for="item in permissionsList" :label="item.permissionsFunction" :value="item.permissionsId" />
      </el-select>
    </el-col>
    <el-col :span="6">
      <el-button type="danger" @click="clickSaveRole">增加角色</el-button>
    </el-col>
  </el-row>

  <el-table :data="tableData" stripe style="width: 100%; margin-top: 10px">
    <el-table-column prop="permissionsFunction" label="功能" />
    <el-table-column prop="operate" label="操作" />
    <el-table-column prop="rolesName" label="角色" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" link @click="delRolePermissions(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <table>
    <tr>
      <td>
        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
          :page-sizes="[1, 2, 3, 4]" :background="true" prev-text="上一页" next-text="下一页"
          layout="slot,prev, pager, next " :total="page.totalCount"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button class="btn-prev" link @click="handleCurrentChange(1)" :disabled="page.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
          :page-sizes="[1, 2, 3, 4]" :background="true" prev-text="上一页" next-text="下一页"
          layout="slot " :total="page.totalCount"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button class="btn-prev" link @click="handleCurrentChange(page.pageCount)" :disabled="page.pageIndex==page.pageCount">尾页</el-button>

        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
          :page-sizes="[1, 2, 3, 4]" :background="true" prev-text="上一页" next-text="下一页"
          layout="sizes,jumper,slot,total" :total="page.totalCount"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          &nbsp;共{{ page.pageCount }}页
        </el-pagination>
      </td>
    </tr>
  </table>

  <!--弹窗-->
  <el-dialog v-model="dialogFormVisible" title="角色权限添加" width="500">
    <el-form :model="form">
      <el-form-item label="角色名称" :label-width="formLabelWidth">
        <el-select v-model="form.rolesId" placeholder="请选择角色">
          <el-option v-for="item in roles" :key="item.rolesId" :label="item.rolesName" :value="item.rolesId" />
        </el-select>
      </el-form-item>
      <el-form-item label="功能名称" :label-width="formLabelWidth">
        <el-input v-for="item in permissionsList.filter(x=>x.permissionsId==form.permissionsId)" :value="item.permissionsFunction" disabled autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限" :label-width="formLabelWidth">
        <el-checkbox-group v-model="form.operateArr">
          <el-checkbox value="浏览" name="type">浏览</el-checkbox>
          <el-checkbox value="增加" name="type">增加</el-checkbox>
          <el-checkbox value="删除" name="type">删除</el-checkbox>
          <el-checkbox value="编辑" name="type">编辑</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="Addpermission()">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref ,onMounted } from "vue";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const dialogFormVisible = ref(false);
const formLabelWidth = '140px'

const page=reactive({
  pageIndex:1,
  pageSize:3,
  totalCount:0,
  pageCount:0
})

const form = reactive({
  rolesId: "",
  permissionsId: "",
  operate: "",

  operateArr:[],
});

//获取角色权限列表
const tableData = ref([]);
const handlerRolepermissions=()=>{
  axios.post(apiUrl+"/api/Permissions/GetRolePermissions",{
    pageIndex:page.pageIndex,
    pageSize:page.pageSize
  }).then(res=>{
    console.log(res.data.data)
    tableData.value=res.data.data.list;
    page.totalCount=res.data.data.totalCount;
    page.pageCount=res.data.data.pageCount;
  })
}

//获取权限框
const permissionsList:any=ref([])
const handlepermission=()=>{
  axios.post(apiUrl+"/api/Permissions/GetPermissions",{})
  .then(res=>{
    permissionsList.value=res.data.data
  })
}

//角色显示
const roles:any=ref([])
const handleRoleAll = () => {
  axios.post(apiUrl+"/api/Permissions/GetAllRole", {})
    .then((res) => {
      console.log(res.data.data)
      roles.value = res.data.data;
    });
};

//弹出框
const clickSaveRole=()=>{
  if(Number(form.permissionsId)!=0){
    dialogFormVisible.value = true
    handleRoleAll()
  }
  else{
    ElMessage.error("请选择权限功能")
    dialogFormVisible.value=false
  }
}

//添加角色权限
const Addpermission=()=>{
  console.log("权限添加",form.operateArr.toString())
  form.operate=form.operateArr.toString();
  axios.post(apiUrl+'/api/Permissions/AddRolePermissions',form)
  .then((res)=>{
    console.log(res.data)
    if(res.data.code==0){
      ElMessage.success("添加成功");
      setTimeout(()=>{
        dialogFormVisible.value=false;
        handlerRolepermissions()
      })
    }
    else{
      ElMessage.error("添加失败")
    }
  })
}

//删除
const delRolePermissions=(row:any)=>{
  console.log(row)
  ElMessageBox.confirm(
    '你确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put(apiUrl+'/api/Permissions/DeleteRolePermissions',{
        rolePermissionsId:row.rolePermissionsId
      })
      .then(res=>{
        if(res.data.code==0){
          ElMessage.success("删除成功");
          handlerRolepermissions();
        }else{
          ElMessage.error("删除失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

//分页
const handleSizeChange = (val: number) => {
  page.pageSize=val;
  handlerRolepermissions();
}
const handleCurrentChange = (val: number) => {
  page.pageIndex=val;
  handlerRolepermissions();
}

//生命周期函数钩子
onMounted(()=>{
  handlerRolepermissions()
  handlepermission()
})
</script>

